<template>
  <div class="history-state">
    <div class="state-item" v-for="(item, index) in historyList" :key="index">
      <div class="start-time">{{ item.startTime }}</div>
      <div class="divider">
        <div class="divider-line"></div>
        <div class="divider-dot"></div>
        <div class="divider-line"></div>
      </div>
      <div class="state-tag">
        <el-tag
          :color="item.machineRtType === 1 ? '#e64c17' : '#28297b'"
          size="small"
          effect="dark"
        >
          {{ item.codeName }}
        </el-tag>
      </div>
      <div class="duration">持续时间:{{ getDuration(item.duration) }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { getDanJiQiangQinLiShi } from '@/api/shengChanJianShi'

  const props = defineProps<{ id?: string; mid?: string }>()

  const pageIndex = ref(0)
  const historyList = ref<any>()

  // watch(
  //   () => props.id,
  //   (val) => {
  //     console.log(val)
  //     pageIndex.value = 0
  //     val && getHistoryStateList()
  //   }
  // )

  const getHistoryStateList = () => {
    getDanJiQiangQinLiShi({
      machineDocumentId: props.mid,
      craftNodeId: props.id,
      pageIndex: pageIndex.value
    })
      .then((res) => {
        // this.loading = false
        historyList.value = res
      })
      .catch(() => {
        // this.loading = false
      })
  }

  const getDuration = (second) => {
    let minutes = Math.round(second / 1000 / 60)
    let hours = Math.round(minutes / 60)
    let days = Math.round(hours / 24)
    // let months = Math.round(days / 30);
    // let years = Math.round(months / 12);
    let oldValue = ''
    if (days > 0) {
      // 几天前
      oldValue = days + '天' + (hours - 24 * days) + '小时' + (minutes - 60 * hours) + '分'
    } else {
      if (hours > 0) {
        // 几小时前
        oldValue = hours + '小时' + (minutes - 60 * hours) + '分'
      } else {
        // 这里  您可以处理一个  刚刚  比如时间小于30分钟
        if (minutes > 0) {
          // 几分钟前
          oldValue = minutes + '分钟'
        } else {
          // 几秒前
          oldValue = '小于1分钟'
        }
      }
    }
    return oldValue
  }

  onMounted(() => {
    console.log(props)
    pageIndex.value = 0
    getHistoryStateList()
  })
</script>
<style lang="scss" scoped>
  .history-state {
    padding-top: 10px;
    height: 480px;
    box-sizing: border-box;
    overflow: auto;

    .state-item {
      display: flex;
      height: 30px;
      line-height: 25px;
      padding-left: 30px;
      color: #2f2f2f;

      .el-tag--small {
        height: 20px !important;
        padding: 0 7px !important;
        --el-icon-size: 12px !important;
        margin-top: 2px;
      }

      .duration {
        margin-left: auto;
        width: 130px;
        text-align: left;
      }
    }

    .state-item:first-child {
      .divider {
        .divider-line:first-child {
          visibility: hidden;
        }
      }
    }
    .state-item:last-child {
      .divider {
        .divider-line:last-child {
          visibility: hidden;
        }
      }
    }

    .state-item:nth-child(odd) {
      background-color: #f2f3f5;
    }
    .state-item:nth-child(even) {
      background-color: #fff;
    }
    .divider {
      width: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .divider-line {
      flex: 1;
      width: 1px;
      height: 1px;
      background-color: #ccc; /* 线条颜色 */
    }

    .divider-dot {
      width: 5px;
      height: 5px;
      margin: 2px 0;
      border: 1px solid #78be20;
      border-radius: 50%;
      //   background-color: #78be20; /* 圆点颜色 */
      z-index: 1;
    }
  }
</style>
